<template>
  <div class="mian">
    <div class="left">
      <div
        class="office_to"
        style="
           {
            background-color: red;
            width: 100px;
            height: 100px;
          }
        "
      >
        <div class="use">590 <br />已使用</div>
        <div class="total">951 <br />总共</div>
      </div>
      <div id="office"></div>
      <div class="indoor">
        <div class="indoor_box">
          <h4>室内环境质量</h4>
          <div class="good_t">
            <p class="good">优</p>
            <p class="normal">良</p>
            <p class="bad">差</p>
          </div>
        </div>
        <div class="table">
          <div class="table_t">
            <div>监测点</div>
            <div>温度 <br /><span>(℃)</span></div>
            <div>湿度<br /><span>(%)</span></div>
            <div>CO<sub>2</sub><br /><span>(PPM)</span></div>
            <div>PM2.5 <br /><span>(ug/cm<sup>3</sup>)</span></div>
            <div>PM10<br /><span>(ug/cm<sup>3</sup>)</span></div>
            <div>TVDC <br /><span>(PPB)</span></div>
          </div>
          <div class="table_b">
            <div v-for="(item, index) in elvo" :key="index" class="elvo">
              <div v-for="(i, k) in item" :key="k">
                {{ i }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="alarm"></div>
    </div>
    <div class="right">
      <div id="useOff"></div>
      <div id="officeList">
        <h4>会议室实时使用列表</h4>
        <div class="list">
          <div
            class="list_t"
            v-for="(item, index) in newOfficeList"
            :key="index"
          >
            <div class="list_l">{{ item.tag }}</div>
            <div class="list_c">
              {{ item.address }} <br />
              预约人员：{{ item.pople }} {{ item.id }}
            </div>
            <div class="list_r">
              使用时间 <br />
              {{ item.time }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, computed } from "vue";
import * as echarts from "echarts";
import "echarts-liquidfill";
import useFontSize from "@/hooks/useFontSize";
let { fontSize } = useFontSize();
let officeCharts = ref(null);
let chartColor = "#fff";
let officeFn = () => {
  let option = {
    title: {
      text: "办公室使用率",
      textStyle: {
        color: chartColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    legend: {
      top: "center",
      left: "60%",
      width: 50,
      formatter: function (params) {
        console.log(params);
        var total = 951;
        var used = total * params.data[0];
        return (
          params.seriesName[0] +
          "：" +
          Math.round(used) +
          "<br>" +
          params.seriesName[1] +
          "：" +
          total
        );
      },
      textStyle: {
        color: chartColor,
      },
      selectedMode:false,
    },
    series: [
      {
        // 单个水波图
        type: "liquidFill", //水波图
        radius: "50%",
        center: ["40%", "50%"], // 动画更新时间
        data: [0.61],
        color: ["#abcdef"],
        itemStyle: {
          opacity: 0.8,
        },
        backgroundStyle: {
          borderWidth: 0,
          borderColor: "rgba(55, 211, 255, 0.42)",
          color: "rgba(12, 41, 49, 0)",
        },
        label: {
          formatter: "62%",
          textStyle: {
            fontSize: 20,
          },
        },
        emphasis: {
          itemStyle: {
            opacity: 0.6, //悬浮样式
          },
        },
        outline: {
          color: "blue",
          opacity: 0.4,
        },
      },
    ],
  };
  officeCharts = echarts.init(document.getElementById("office"));
  officeCharts.setOption(option);
};
const elvo = ref([
  ["JO1", 27.6, 49.7, 611, 3.4, 4.3, 11.5],
  ["JO2", 27.4, 45.4, 6202, 4.1, 4.2, 11.3],
  ["JO3", 27.4, 45.7, 579, 3.9, 4.2, 11.1],
  ["JO4", 27.6, 50.2, 6259, 3.9, 4.2, 11.1],
  ["JO1", 27.6, 49.7, 611, 3.4, 4.3, 11.5],
  ["JO2", 27.4, 45.4, 6202, 4.1, 4.2, 11.3],
  ["JO3", 27.4, 45.7, 579, 3.9, 4.2, 11.1],
  ["JO4", 27.6, 50.2, 6259, 3.9, 4.2, 11.1],
]);
let alarmCharts = ref(null);
let alarmFn = () => {
  let option = {
    title: {
      text: "告警统计",
      textStyle: {
        color: chartColor,
        fontSize: 18,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 20,
      textStyle: {
        color: chartColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        center: ["30%", "50%"],
        radius: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#aeaeae",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "center",
          formatter: "0\n总数",
          color: chartColor,
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
        ],
      },
    ],
  };
  alarmCharts = echarts.init(document.getElementById("alarm"));
  alarmCharts.setOption(option);
};
// 会议室使用统计
let useOffCharts = ref(null);
let useOffFn = () => {
  let option = {
    title: {
      text: "会议室使用统计",
      textStyle: {
        color: chartColor,
        fontSize: 18,
      },
      top: 15,
      left: 15,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "center",
      left: "60%",
      width: 20,
      textStyle: {
        color: chartColor,
      },
      selectedMode:false,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        center: ["30%", "50%"],
        radius: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#d9d9d9",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "center",
          formatter: "15\n 总数",
          textStyle: {
            color: chartColor,
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
        ],
      },
    ],
  };
  useOffCharts = echarts.init(document.getElementById("useOff"));
  useOffCharts.setOption(option);
};
// 会议室使用记录
let newList = [];
let officeList = ref([
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊1",
    id: "00322217",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
  {
    tag: "空闲",
    address: "J1-1A02R",
    pople: "熊11",
    id: "00311117",
    time: "15:00-16:00",
  },
]);
function plusXing(str, frontLen, endLen, cha) {
  let len = str.length - frontLen - endLen;
  let xing = "";
  for (let i = 0; i < len; i++) {
    xing += cha;
  }
  return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
}
const newOfficeList = computed(() => {
  officeList.value.forEach((item) => {
    item.id = plusXing(item.id, 3, 2, "*");
    if (item.pople.length > 2) {
      item.pople = plusXing(item.pople, 1, 0, "*");
    } else if (item.pople.length <= 2) {
      item.pople = plusXing(item.pople, 1, 0, "*");
    }
  });
  return officeList.value;
});
const idCode = () => {
  return (newList.value = officeList.value.map((item) => {
    item.id = plusXing(item.id, 3, 2, "*");
  }));
};
onMounted(() => {
  newOfficeList;
  officeFn();
  useOffFn();
  alarmFn();
  window.addEventListener("resize", () => {
    officeCharts.resize();
    useOffCharts.resize();
    alarmCharts.resize();
  });
});
onUnmounted(() => {
  officeCharts.dispose();
  alarmCharts.dispose();
  useOffCharts.dispose();
});
</script>
<style scoped>

.left {
  position: relative;
  float: left;
}
#office,
.indoor,
#alarm,
#useOff {
  width: 4rem;
  height: 2.3rem;
  overflow: hidden;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}
.indoor {
  color: var(--text-color);
  height: 3.5rem;
}
.indoor_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0 0 0.15rem;
}
.indoor_box h4 {
  padding: 0;
}
.office_to {
  color: var(--text-color);
  position: absolute;
  top: 13%;
  right: 0%;
  font-size: 16px;
}
.use::before {
  content: "";
  position: absolute;
  top: 0;
  left: -32%;
  width: 0.15rem;
  height: 0.15rem;
  background-color: #a3bed9;
}
.total {
  position: relative;
}
.total::before {
  content: "";
  position: absolute;
  top: 0;
  left: -32%;
  width: 0.15rem;
  height: 0.15rem;
  background-color: #515965;
}
.table {
  width: 100%;
  height: 3rem;
  overflow: hidden;
}
.indoor {
  position: relative;
}
.good_t {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.good_t p {
  font-size: 16px;
  width: 0.6rem;
  position: relative;
}
.good_t p::before {
  content: "";
  position: absolute;
  top: 20%;
  left: -30%;
  width: 14px;
  height: 14px;
  background-color: #77d14f;
}
.good_t p:nth-child(2)::before {
  background-color: #e1b367;
}
.good_t p:nth-child(3)::before {
  background-color: #a65857;
}
.table_t {
  display: flex;
  font-size: 16px;
  padding: 0.3rem 0 0 0;
}
.table_t div {
  font-size: 16px;
  width: 1.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table_t div span {
  font-size: 14px;
}
h4 {
  color: var(--text-color);
  font-size: 18px;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding: 0.15rem 0 0 0.15rem;
}
.elvo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.elvo div {
  font-size: 16px;
  width: 1.5rem;
  height: 0.25rem;
  padding: 0;
  text-align: center;
  position: relative;
}
.elvo div::after {
  position: absolute;
  bottom: 5%;
  left: 20%;
  content: "";
  width: 0.35rem;
  height: 2px;
  background-color: green;
}
.elvo div:first-child::after {
  position: absolute;
  top: 10%;
  left: 10%;
  content: "";
  width: 0;
  height: 0;
}
#useOff {
  width: 4rem;
  height: 2.2rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}
#officeList {
  width: 4rem;
  height: 6rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
.list {
  color: var(--text-color);
  padding: 0.1rem 0 0 0.2rem;
  font-size: 14px;
  height: 5rem;
  overflow-y: auto;
  margin: 0.2rem 0 0 0;
  overflow-x: hidden;
}
.right {
  float: right;
}
.list_t {
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0.2rem;
}
.list_l {
  flex: 40px 0 0;
  height: 40px;
  border-radius: 40px;
  line-height: 40px;
  text-align: center;
  color: var(--text-color);
  font-size: 14px;
  background-color: #7ac54b;
  margin-right: 0.2rem;
}
.list_c {
  width: 1.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 0.5rem;
}
.list_r {
  width: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
